<!DOCTYPE html>
<html lang="zh-CN">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/myblog/img/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="/myblog/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="TakCode Blog">
  <meta name="author" content="谢芃">
  <meta name="keywords" content="">
  <title>page.title - TakCode</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/mdbootstrap/4.13.0/css/mdb.min.css" />
<link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/3.0.1/github-markdown.min.css" />

<link rel="stylesheet" href="//at.alicdn.com/t/font_1067060_qzomjdt8bmp.css">



  <link  rel="stylesheet" href="/myblog/lib/prettify/tomorrow-night-eighties.min.css" />

<link  rel="stylesheet" href="/myblog/css/main.css" />


  <link defer rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />


<!-- 自定义样式保持在最底部 -->


<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/myblog/">&nbsp;<strong>TakCode</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/">首页</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/archives/">归档</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/categories/">分类</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/tags/">标签</a>
          </li>
        
          
          
          
          
          <li class="nav-item">
            <a class="nav-link" href="/myblog/about/">关于</a>
          </li>
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('/myblog/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask rgba-black-light flex-center">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      <div class="container nopadding-md">
        <div class="py-5 z-depth-3" id="board"
          >
          
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-10 m-auto">
                

<div class="page-content">
  <h3 id="Taro的生命周期"><a href="#Taro的生命周期" class="headerlink" title="Taro的生命周期"></a><code>Taro</code>的生命周期</h3><p><img src="https://image-static.segmentfault.com/394/214/3942143032-5b5a70dfdc45c_articlex" srcset="/myblog/img/loading.gif" alt=""></p>
<p>由于页面 JS 也继承自 <code>Component</code> 组件基类，所以页面同样拥有生命周期，页面的生命周期方法如下：</p>
<p> <strong><code>componentWillMount()</code></strong></p>
<p>页面加载时触发，一个页面只会调用一次，此时页面 DOM 尚未准备好，还不能和视图层进行交互</p>
<p><strong><code>componentDidMount()</code></strong></p>
<p>页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互</p>
<p> <strong><code>componentWillReceiveProps(nextProps)</code></strong></p>
<p>已经装载的组件接收到新属性前调用</p>
<p><strong><code>shouldComponentUpdate(nextProps, nextState)</code></strong></p>
<p>页面是否需要更新，返回 <code>false</code> 不继续更新，否则继续走更新流程，一般用来多次<code>setState</code>调用时，提升 <code>render</code>的性能。</p>
<p><code>nextProps</code>: 表示通过父组件传给子组件的对象，下一个<code>props</code>。</p>
<p><code>nextState</code>: 表示下一个<code>state</code>的值。</p>
<pre><code class="js">shouldComponentUpdate(nextProps，nextState) {
  if(nextState.text==&#39;李四&#39;){ return true}
  else {return false}
}</code></pre>
<p><strong><code>componentWillUpdate(nextProps, nextState)</code></strong></p>
<p>页面即将更新</p>
<p><strong><code>componentDidUpdate(prevProps, prevState)</code></strong></p>
<p>页面更新完毕</p>
<p><strong><code>componentWillUnmount()</code></strong></p>
<p>页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时</p>
<p><strong><code>componentDidShow()</code></strong></p>
<p>页面显示/切入前台时触发</p>
<p><strong><code>componentDidHide()</code></strong></p>
<p>页面隐藏/切入后台时触发， 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等</p>
<p><strong>在以上所有的生命周期方法中，都可以通过 <code>this.$router.params</code> 获取打开当前页面路径中的参数</strong>。</p>
<h3 id="Taro的State"><a href="#Taro的State" class="headerlink" title="Taro的State"></a><code>Taro</code>的<code>State</code></h3><p>状态更新一定是异步的</p>
<p><code>React</code>中的状态更新不一定是异步的。</p>
<p>同 <code>React</code>一致，更新数据必须调用<code>setState</code>方法，直接赋值是不会更新组件的</p>
<p>例如 <code>this.state.name=&quot;张三&quot;</code></p>
<p>正确的姿势应该是<code>this.setState({name:&quot;张三&quot;})</code></p>
<h3 id="Taro开发注意事项"><a href="#Taro开发注意事项" class="headerlink" title="Taro开发注意事项"></a>Taro开发注意事项</h3><p>组件props传值时需要加on</p>
<p>jsx语法只能在<code>render()</code> 中定义</p>
<p>Taro事件采用驼峰命名</p>
<p>在Taro中阻止事件冒泡。你必须明确的使用 <code>stopPropagation</code></p>
<h3 id="Taro路由"><a href="#Taro路由" class="headerlink" title="Taro路由"></a>Taro路由</h3><p>·在Taro中，路由功能是默认自带的，不需要开发者进行额外的路由配置。<br>·这里相当于通过小程序的配置适配了小程序和H5的路由问题。<br>·Taro默认根据配置路径生成了 Route<br>·我们只需要在入口文件的 config配置中指定好 pages，然后就可以在代码中通过Taro提供的API来跳转到目的页面</p>
<h4 id="路由传参"><a href="#路由传参" class="headerlink" title="路由传参"></a>路由传参</h4><p>我们可以通过在所有跳转的url后面添加查询字符串参数进行跳转传参，例如</p>
<p>传入参数<code>id=2&amp;type=test</code></p>
<p><code>Taro.navigateTo({url:&#39;/pages/page/path/name?id=2&amp;type=test&#39;})</code></p>
<p>这样的话，在跳转成功的目标页的生命周期方法里就能通过<code>this.$router.params</code>获取到传入的参数，例如上述跳转，在目标页的 <code>componentWillMount</code>生命周期里获取入参</p>
<h4 id="静态资源引用"><a href="#静态资源引用" class="headerlink" title="静态资源引用"></a>静态资源引用</h4><p>在Taro中可以像使用 webpack那样自由地引用静态资源，而且不需要安装任何 loader</p>
<p>引用样式文件</p>
<p>可以直接通过ES6的 Import语法来引用样式文件</p>
<p>可以直接通过ES6的 Import语法来引用JS文件</p>
<p><code>import {functionName} from &#39;./css/path/name.js&#39;</code></p>
<p><code>import defaultName from &#39;./css/path/name&#39;</code><br>可以去掉文件路径后面的后缀</p>
<p><code>import namedPng from &#39;../../images/path/named.png&#39;</code></p>
<pre><code>&lt;View&gt;
&lt;Image src={namedPng} /&gt;
&lt;/View&gt;
----或者----
&lt;Image src={require(&#39;../../images/path/named.png&#39;)} /&gt;</code></pre><p>也可以用 require来引用，值得注意的是只有本地文件才这样做，如果是线上图片直接赋值即可</p>
<h3 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染"></a>条件渲染</h3><p>短路表达式</p>
<p>值得注意的是小程序在短路表达式渲染时，会岀现true或者 false的短暂岀现，所以如果是要适配小程序，最好采用三元表达式来进行判断。</p>
<p>三元表达式</p>
<p>比较通用的一种方式，jsx语法是不支持<code>if</code>操作符的所以只能用三元表达式或者短路表达式</p>
<h3 id="认识Generator-生成器函数"><a href="#认识Generator-生成器函数" class="headerlink" title="认识Generator  生成器函数"></a>认识Generator  生成器函数</h3><p>generator 生成器函数</p>
<ul>
<li>普通函数，一路到底</li>
<li>generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权</li>
<li>yield 有 放弃、退让、退位的意思</li>
<li>需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步</li>
<li>generator函数前面加一个 <code>*</code> 两边可以有空格，或靠近函数或<code>function</code></li>
<li>背后实际生成多个小函数，实现走走停停</li>
</ul>
<pre><code class="js">function show() {
    console.log(&#39;a&#39;)
    console.log(&#39;b&#39;)
}
show() // 普通函数

function *show2() {
    console.log(&#39;1&#39;)
    yield
    console.log(&#39;2&#39;)
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了，没有结果 undefined</code></pre>
<h4 id="generator-yield是啥"><a href="#generator-yield是啥" class="headerlink" title="generator-yield是啥"></a>generator-yield是啥</h4><ul>
<li><code>yield</code><ul>
<li>既可传参，又可以返回</li>
<li>第一个<code>next()</code>传参无效，只用来启动</li>
</ul>
</li>
<li>如果函数前漏掉 <code>*</code><ul>
<li>就是普通函数</li>
<li>如果有<code>yield</code>会报错， <code>ReferenceError: yield is not defined</code></li>
<li>yield 只能在Generator函数内部使用</li>
</ul>
</li>
</ul>
<pre><code class="js">function * show() {
    console.log(&#39;1&#39;)
    var a = yield
    console.log(&#39;2&#39;)
    console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20

function* show2() {
    console.log(&#39;1&#39;)
    yield 10
    console.log(&#39;2&#39;)
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// { value: undefined, done: true } 最后的value需要return返回</code></pre>
<h4 id="generator-实例"><a href="#generator-实例" class="headerlink" title="generator-实例"></a>generator-实例</h4><ul>
<li>Promise 适合一次读一组</li>
<li>generator 适合逻辑性的</li>
</ul>
<pre><code class="js">// 带逻辑-generator
runner(function * () {
    let userData = yield $.ajax({url: &#39;getUserData&#39;})

    if (userData.type == &#39;VIP&#39;) {
        let items = yield $.ajax({url: &#39;getVIPItems&#39;})
    } else {
        let items = yield $.ajax({url: &#39;getItems&#39;})
    }
})
// yield 实例，用同步方式写异步
server.use(function * () {
    let data = yield db.query(`select * from user_table`)
    this.body = data
})</code></pre>
<h3 id="Redux-Sage"><a href="#Redux-Sage" class="headerlink" title="Redux-Sage"></a>Redux-Sage</h3><p>用过<code>express</code>之类的web框架，对中间件<code>Middleware</code>这个概念可能不会陌生。</p>
<p>中间件简单来理解，就是一种独立运行于各个框架之间的代码，本质就是一个函数，可访问请求对象和响应对象，可对请求进行拦截处理，处理后再将控制权向下传递，也可终止请求，向客户端做岀响应、</p>
<p>而在<code>Redux</code>里面，借鉴了这一套思想，中间件是运行在<code>action</code>发送出去，到达 <code>reducer</code>之间的一段代码，就可以把代码调用流程变为 <code>action</code>-&gt; <code>Middlewares</code>-&gt; <code>reducer</code>，这种机制可以让我们改变数据流，实现例如异步 <code>action</code>, <code>action</code>过滤，日志输入，异常报告等功能</p>
<p><code>redux-saga</code>是一个用于管理应用程序 <code>Side Effect</code>副作用（例如：异步操作等）的 <code>library</code> 图书馆，它的目的是让副作用管理更加的简单，执行更高效</p>
<p><code>redux-saga</code>就是 <code>redux</code>的一个中间件，可以通过正常的 <code>redux action</code>从主应用程序启动，暂停和取消，它可以访问完整的 <code>redux state</code>，也能够<code>dispatch redux action</code> </p>
<p><code>redux-saga</code>使用了ES6的 <code>Generator</code>功能，让异步流程更加易于读取，写入和测试，通过这种方式，让异步看起来更加像标准同步的 javascrip代码(有点像 async / await) </p>
<h4 id="Redux-Saga常见API介绍"><a href="#Redux-Saga常见API介绍" class="headerlink" title="Redux-Saga常见API介绍"></a>Redux-Saga常见API介绍</h4><h5 id="Middleware"><a href="#Middleware" class="headerlink" title="Middleware"></a>Middleware</h5><p><code>createSagaMiddleware(options)</code>创建一个 <code>Redux middleware</code>，并将 <code>Sagas</code> 连接到 <code>Redux store</code>，通过 <code>createStore</code>第三个参数传入</p>
<p><code>options</code>：传递给 <code>middleware</code>的选项列表，默认可以不用传递<br><code>middleware.run(saga, ...args)</code>动态地运行<code>saga</code>。只能用在 <code>applyMiddleware</code>阶段之后执行<code>Saga</code></p>
<h3 id="DvaJS"><a href="#DvaJS" class="headerlink" title="DvaJS"></a>DvaJS</h3>
</div>

              </div>
            </div>
          </div>
        </div>
      </div>
    
  </main>

  
    <a class="z-depth-1" id="scroll-top-button" href="#" role="button">
      <i class="fa fa-chevron-up scroll-top-arrow" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><b>Hexo</b></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"> <b>Fluid</b></a>
    </div>
    

    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/popper.js/1.16.1/umd/popper.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="https://cdn.staticfile.org/mdbootstrap/4.13.0/js/mdb.min.js" ></script>
<script  src="/myblog/js/main.js" ></script>


  <script  src="/myblog/js/lazyload.js" ></script>





  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/myblog/js/clipboard-use.js" ></script>








<!-- Plugins -->



  <script  src="https://cdn.staticfile.org/prettify/188.0.0/prettify.min.js" ></script>
  <script>
    $(document).ready(function () {
      $('pre').addClass('prettyprint  linenums');
      prettyPrint();
    })
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "page.title&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/myblog/js/local-search.js" ></script>
  <script>
    var path = "/myblog/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      getSearchFile(path);
      this.onclick = null
    }
  </script>



  <script defer src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <script>
    $("#post img:not(.no-zoom img, img[no-zoom])").each(
      function () {
        var element = document.createElement("a");
        $(element).attr("data-fancybox", "images");
        $(element).attr("href", $(this).attr("src"));
        $(this).wrap(element);
      }
    );
  </script>












</body>
</html>
